import React from 'react'
import {DownOutlined} from "@ant-design/icons";
import PropTypes from 'prop-types';
// 定义 prop 类型
Anav.propTypes = {
  navstyle: PropTypes.object,
};

// 设置默认 props
Anav.defaultProps = {
  navstyle: {},
};
function Anav(props) {
  return (
    <div>
      <nav
          style={props.navstyle}
        >
          <div className="templateMaterial">
            模版素材
            <DownOutlined style={{ fontSize: "10px" }} />
            <div className="template">
              <div className="material">
                <ul>
                  <h4>营销推广</h4>
                  <li>海报</li>
                  <li>传单</li>
                  <li>长图</li>
                  <li>宣传册</li>
                  <li>易拉宝</li>
                  <li>logo</li>
                  <li>通知公告</li>
                  <li>画册</li>
                  <li>网页</li>
                </ul>
                <ul>
                  <h4>社交媒体</h4>
                  <li>小红书</li>
                  <li>公众号</li>
                  <li>社群发圈</li>
                  <li>日签</li>
                  <li>朋友圈</li>
                  <li>二维码</li>
                  <li>头像</li>
                  <li>拼图</li>
                  <li>视频创作</li>
                  <li>祝福问候</li>
                </ul>
                <ul>
                  <h4>学习办公</h4>
                  <li>名片</li>
                  <li>PPT</li>
                  <li>工作证</li>
                  <li>证件照</li>
                  <li>报告</li>
                  <li>图表</li>
                  <li>总结报告</li>
                </ul>
                <ul>
                  <h4>电商产品</h4>
                  <li>电商Banner</li>
                  <li>产品主图</li>
                  <li>图标</li>
                  <li>店招</li>
                  <li>优惠券</li>
                  <li>会员卡</li>
                  <li>直播贴片</li>
                  <li>邀请函</li>
                  <li>红包封面</li>
                </ul>
                <ul>
                  <h4>教育培训</h4>
                  <li>简历</li>
                  <li>展板</li>
                  <li>贺卡</li>
                  <li>课程推广</li>
                  <li>书籍封面</li>
                  <li>壁纸</li>
                  <li>手账</li>
                  <li>课程表</li>
                  <li>手抄报</li>
                </ul>
                <ul>
                  <h4 style={{marginLeft:'-10px'}}>素材下载</h4>
                  <li>AI素材</li>
                  <li>视频模板素材</li>
                  <li>视频素材</li>
                  <li>免抠素材</li>
                  <li>图片素材</li>
                  <li>平面模板素材</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="designScene">
            设计场景
            <DownOutlined style={{ fontSize: "10px" }} />
            <div className="design">
              <div className="scene">
                <ul>
                  <h4>在线设计</h4>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h4>印刷物料</h4>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h4>行业资源</h4>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="toolRecommendation">
            工具推荐
            <DownOutlined style={{ fontSize: "10px" }} />
            <div className="tool">
              <div className="recommendation">
                <ul>
                  <h3>营销推广</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h3>社交媒体</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h3>学习办公</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
              </div>
            </div>
          </div>
          <div className="resourceTutorial">
            资源教程
            <DownOutlined style={{ fontSize: "10px"}} />
            <div className="resource">
              <div className="tutorial">
                <ul>
                  <h3>营销推广</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h3>社交媒体</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
                <ul>
                  <h3>学习办公</h3>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                  <li>12</li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
    </div>
  )
}

export default Anav